<template>
	<view>
		<u-navbar :is-back="true" title="我的委托" :border-bottom="false"></u-navbar>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="black" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(order_item, order_i) in orderList" :key="order_i">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<!-- {{ order_i }} -->
							<view v-if="swiper.length === 0">
								<view class="centre">
									<image :src="empty" mode=""></image>
									<view class="explain">
										您还没有相关的订单
									</view>
								</view>
							</view>
							<view v-else class="order" v-for="(item, index) in swiper" :key="index"
								@click="orderDetail(item.id)">
								<view class="top">
									<view class="left">
										<view class="store" v-if=!item.state>剩余时间：{{ item.time }}</view>
									</view>
									<view class="state">
										{{ title[item.state] }}
									</view>
								</view>
								<view class="item">
									<view class="left">
										<image :src="item.image" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">
											{{ item.title }}
										</view>
										<view class="price">¥{{ item.price }}</view>
									</view>
								</view>

								<!-- 取消订单 修改订单信息 ！继续支付 -->
								<!-- 取消订单 修改订单信息 -->
								<!-- 取消订单 ！服务券码 -->
								<!-- 删除订单 申请退款 ！评价 -->
								<!-- 删除订单 （是否包括在待评价）-->

								<view class="bottom" v-if="item.state == 0">
									<view class="btn" @click.stop="cancelOrder(item.id)">取消订单</view>
									<view class="btn" @click.stop="modifyOrder(item.id)">修改订单信息</view>
									<view class="pbtn" @click.stop="continuePay(item.id)">继续支付</view>
								</view>
								<view class="bottom" v-else-if="item.state == 1">
									<view class="btn" @click.stop="cancelOrder(item.id)">取消订单</view>
									<view class="btn" @click.stop="modifyOrder(item.id)">修改订单信息</view>
								</view>
								<view class="bottom" v-else-if="item.state == 2">
									<view class="btn" @click.stop="cancelOrder(item.id)">取消订单</view>
									<view class="pbtn" @click.stop="QRcode(item.id)">服务券码</view>
								</view>
								<view class="bottom" v-else-if="item.state == 3">
									<view class="btn" @click.stop="deleteOrder(item.id)">删除订单</view>
									<view class="btn" @click.stop="refund(item.id)">申请退款</view>
									<view class="pbtn" @click.stop="comment(item.id)">评价</view>
								</view>
								<view class="bottom" v-else-if="item.state == 4">
									<view class="btn" @click.stop="deleteOrder(item.id)">删除订单</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="buttom">
			<view class="loginType">
				<view class="wechat item">
					<view class="icon"><u-icon size="60" name="server-man" color="#999" @click="server"></u-icon></view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default {
	data() {
		return {
			//待评价相当于已完成
			title: ['待付款', '待接单', '待服务', '已完成', '已关闭'],
			empty: '/static/empty/default.png',
			orderList: [[1], [], [], [], []],
			//0123 '待付款','待接单','待服务','待评价'
			//每个页面的数据
			demodata:[{
				id: 1,
				title: '日常清洁 2小时1人急速清洁全程质保',
				price: 12212121,
				time: '10:00',
				state: 0,
				image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
			}, {
				id: 2,
				title: '日常清洁 2小时1人急速清洁全程质保',
				price: 12212121,
				time: '10:00',
				state: 1,
				image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
			}, {
				id: 3,
				title: '日常清洁 2小时1人急速清洁全程质保',
				price: 12212121,
				time: '10:00',
				state: 2,
				image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
			}, {
				id: 4,
				title: '日常清洁 2小时1人急速清洁全程质保',
				price: 12212121,
				time: '10:00',
				state: 3,
				image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
			}],
			swiper: [],
			list: [
				{
					name: '全部'
				},
				{
					name: '待付款'
					// count: 1
				},
				{
					name: '待接单'
				},
				{
					name: '待服务'
				},
				{
					name: '待评价'
				},
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			pageNum: 1,
			pageSize: 100,
		};
	},
	onLoad() {
		// this.getOrderList(0);
		// this.getOrderList(1);
		// this.getOrderList(2);
		// this.getOrderList(3);
		this.getData()
	},
	methods: {
		getData() {
			this.swiper=this.demodata
		},
		login() {
			this.$u.route('/pages/login/login')
		},
		// 页面数据
		getOrderList(idx) {
			this.findHouseList(idx)
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
			this.swiper = []//清空
			console.log('页数', index)
			this.getOrderList(index);//1234对应0123
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		findHouseList(idx) {
			//再获取数据接口
			let url = ''
			//假装筛选
			console.log('id',idx)
			if(idx==0){
				this.swiper=this.demodata.slice()
			}
			else{
				const temp = this.demodata.slice()
				//console.log('数组',temp.filter(temp => temp.state == idx-1))
				this.swiper=temp.filter(temp => temp.state == idx-1)
			}
		},
		// publishHouse(){
		// 	this.$u.route('/pages/detail/preHouse');
		// },
		// server(){
		// 	// window.open ('https://sourcebyte.cn')
		// 	uni.makePhoneCall({
		// 	  phoneNumber: "18720989281",
		// 	});
		// },
		cancelOrder(houseId) {
			this.$u.route({
				url: '/pages/detail/preHouse',
				params: {
					houseId: houseId
				}
			})
		},
		modifyOrder(houseId) {
			this.$u.route({
				url: '/pages/detail/detail',
				params: {
					houseId: houseId
				}
			})
		},
		continuePay(houseId) {
			this.$u.route({
				url: '/pages/detail/detail',
				params: {
					houseId: houseId
				}
			})
		},
		QRcode(houseId) {
			this.$u.route({
				url: '/pages/detail/detail',
				params: {
					houseId: houseId
				}
			})
		},
		deleteOrder(houseId) {
			this.$u.route({
				url: '/pages/detail/detail',
				params: {
					houseId: houseId
				}
			})
		},
		refund(houseId) {
			this.$u.route({
				url: '/pages/detail/detail',
				params: {
					houseId: houseId
				}
			})
		},
		comment(houseId) {
			this.$u.route({
				url: '/pages/detail/detail',
				params: {
					houseId: houseId
				}
			})
		},
		orderDetail(houseId) {
			// console.log('dd', houseId)
			// // 传入
			// uni.navigateTo({
			// 	url: `./pages/housekeeperOrder/detail`
			// })
			this.$u.route({
				url: '/pages/detail/detail',
				params: {
					houseId: houseId
				}
			})
		},
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;

	.empty {
		overflow: hidden;

		.tip {
			color: #909399;
		}

		.btn {
			color: #fff;
			background-color: #2979ff;
			width: 200rpx;
			padding: 15rpx 28rpx;
			border-radius: 130rpx;
			margin: 30rpx 0 0 100rpx;
		}
	}
}

.order {
	width: 680rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;

	.top {
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.store {
				// margin: 0 10rpx;
				color: red;
			}
		}

		.state {
			float: right;
			color: #6c7cf4;
		}

		.right {
			color: #2979ff;
		}
	}

	.item {
		display: flex;
		margin: 20rpx 0 0 0;

		.left {
			margin-right: 30rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}

		.content {
			.title {
				font-weight: bold;
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.price {
				margin: 20rpx 0;
				font-size: 30rpx;
			}

			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}

			.desc {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
		}
	}

	.bottom {
		display: flex;
		margin-top: 20rpx;
		padding: 0 10rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			margin-left: 20rpx;
			height: 70rpx;
			line-height: 65rpx;
			// width: 160rpx;
			padding-left: 30rpx;
			padding-top: 0rpx;
			padding-right: 30rpx;
			display: inline-block;
			white-space: nowrap;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: black;
		}

		.pbtn {
			margin-left: 20rpx;
			height: 70rpx;
			line-height: 65rpx;
			// width: 160rpx;
			padding-left: 30rpx;
			padding-top: 0rpx;
			padding-right: 30rpx;
			display: inline-block;
			white-space: nowrap;
			border-radius: 26rpx;
			font-size: 26rpx;
			text-align: center;
			color: white;
			background-color: #6c76f4;
			border: 2rpx solid #6c76f4;
		}

		.evaluate {
			// color: #2979ff;
			// border-color: #2979ff;
			color: $u-tips-color;
			border-color: $u-tips-color;
		}
	}
}

.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;

	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}

	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background-image: linear-gradient(to left, #2979ff, rgba(#2979ff, 0.6));
	}
}

.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}

.swiper-box {
	flex: 1;
}

.swiper-item {
	height: 100%;
}

.buttom {
	.loginType {
		font-size: 14px;
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		width: 60px;
		height: 60px;
		padding: 4px;
		cursor: pointer;
		background: #FFF;
		text-align: center;
		line-height: 60px;
		border-radius: 100%;
		-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
	}
}
</style>
